<template>
  <div>
    <page-main style="position: relative;">
      <div id="mapContainer"></div>
      <!-- <div style="background-color: #05ABF2; width: 50px; height: 50px; border-radius: 50%; position: absolute; top: 30px; color:red"></div> -->
      <!-- <el-input
                style="width: 200px; position: absolute; top: 30px; left: 40px;"
                prefix-icon="el-icon-search"
                v-model="search"
                :fetch-suggestions="querySearch"
            >
            </el-input> -->
      <el-autocomplete
        style="width: 250px; position: absolute; top: 30px; left: 40px;"
        v-model="search"
        :fetch-suggestions="querySearch"
        prefix-icon="el-icon-search"
        placeholder="请输入建筑名称/单位/地址"
        clearable
        @clear="clearSelect"
        @select="handleSelect"
      ></el-autocomplete>
    </page-main>
  </div>
</template>

<script>
import buildImg from '@/assets/images/buildMap.png'
import buildImgWarning from '@/assets/images/buildMapWarning.gif'
export default {
  data() {
    return {
      // 建筑信息
      buildingInfo: '',
      buildingMap: '',
      search: '',
      restaurants: [],
      buildList: [],
      buildImg,
      buildImgWarning
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 清空输入框
    clearSelect() {
      this.getPoint(this.buildList)
    },
    // 输入框提示
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      cb(results)
    },
    // 输入框提示
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
      }
    },
    // 点击提示
    handleSelect(row) {
      console.log(row)
      // this.buildingMap.setCenter([row.longitude, row.latitude])
      // this.buildingMap.setZoom(15)
      let map = new AMap.Map('mapContainer', {
        resizeEnable: true,
        center: [row.longitude, row.latitude],
        zoom: 17
      })
      this.buildingInfo = new AMap.InfoWindow({
        offset: new AMap.Pixel(10, -5)
      })
      // 地图放大缩小控件
      let toolBar = new AMap.ToolBar({
        visible: false,
        position: {
          top: '110px',
          right: '40px'
        }
      })
      toolBar.show()
      map.addControl(toolBar)
      this.buildingMap = map
      let temp = this.buildList
      temp.map((item) => {
        let marker = new AMap.Marker({
          position: [item.longitude, item.latitude],
          map: map,
          icon: item.method == 3 ? buildImgWarning : buildImg
        })
        marker.build_id = item.id
        marker.content = `<div style="padding: 5px 10px;"><div>建筑名称：${item.architecture_name}</div><div>单位：${item.unit_name}</div><div>单位联系人：${item.contact_name}</div><div>联系电话：${item.phone}</div><div>地址: ${item.address}</div></div>`
        marker.on('click', this.infoOpen)
        // marker.on('mouseout', this.infoClose)
      })
    },
    // 数据
    getData() {
      let params = {
        total_type: 'yj_unit',
        page: 1,
        rows: 9999
      }
      // 正式数据
      this.$api.post('/unit/DeviceWarning/buildList', params).then((res) => {
        // 测试数据
        // this.$api.post('/index/TestData/buildList', params).then((res) => {
        // 拼接建筑,以便搜索
        res.data.list.forEach((item) => {
          let arr = {
            value: `${item.architecture_name} (单位: ${item.unit_name} 地址: ${item.address})`,
            ...item
          }
          this.restaurants.push(arr)
        })
        this.buildList = res.data.list
        this.getPoint(res.data.list)
      })
    },
    getPoint(data) {
      return new Promise((resolve) => {
        let map = new AMap.Map('mapContainer', {
          resizeEnable: true,
          center: [101.718637, 26.582347],
          zoom: 13
        })
        this.buildingInfo = new AMap.InfoWindow({
          offset: new AMap.Pixel(10, -5)
        })
        // 地图放大缩小控件
        let toolBar = new AMap.ToolBar({
          visible: false,
          position: {
            top: '110px',
            right: '40px'
          }
        })
        toolBar.show()
        map.addControl(toolBar)
        this.buildingMap = map
        let temp = data
        temp.map((item) => {
          let marker = new AMap.Marker({
            position: [item.longitude, item.latitude],
            map: map,
            icon: item.method == 3 ? buildImgWarning : buildImg
          })
          marker.build_id = item.id
          marker.content = `<div style="padding: 5px 10px;"><div>建筑名称：${item.architecture_name}</div><div>单位：${item.unit_name}</div><div>单位联系人：${item.contact_name}</div><div>联系电话：${item.phone}</div><div>地址: ${item.address}</div></div>`
          marker.on('click', this.infoOpen)
          // marker.on('mouseout', this.infoClose)
        })
        // map.setFitView()
        resolve()
      })
    },
    infoOpen(e) {
      this.buildingInfo.setContent(e.target.content)
      this.buildingInfo.open(this.buildingMap, e.target.getPosition())
    },
    infoClose(e) {
      this.buildingInfo.close(this.buildingMap, e.target.getPosition())
    }
  }
}
</script>

<style>
#mapContainer {
    width: 100%;
    height: 85vh;
}
.amap-marker img {
    width: 30px;
    height: 39px;
}
</style>
